<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			background-color: #ccc;
		}

		div.active {
			background-color: red;
		}
	</style>
</head>
<body>
	
	<div id="app1">
		<div class="static" v-bind:class="{active: isActive, 'text-danger': danger}">abc</div>
		<div v-bind:class="classObj">def</div>
		<div v-bind:class="[myCls1, myCls2]">hij</div>
		<div v-bind:class="[isActive ? myCls1 : myCls2]">klm</div>

		<hr>

		<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">nop</div>
		<div v-bind:style="styleObject">qrs</div>
	</div>

	<script src="node_modules/vue/dist/vue.min.js"></script>
	<script>
		var app1 = new Vue({
			el: '#app1',
			data: {
				isActive: false,
				danger: false,
				classObj: {
					'red-bg': true,
					f24: true
				},
				myCls1: 'cls1',
				myCls2: 'cls2',
				activeColor: 'red',
  				fontSize: 30,
  				styleObject: {
					color: 'red',
					fontSize: '13px'
				}
			},
			computed: {

			}
		});
	</script>
</body>
</html>